<template>
  <div class="double-dan-rule">
    <div class="double-dan-rule-header">
      <img src="~@/assets/imgs/information/white_icon_back.png" alt="" @click="back"/>
    </div>
    <div class="cont">
      <div class="title">Activity Rules</div>
      <div class="item" v-for="(item, index) in testList" :key="item">
        <div>{{index + 1}}.</div>
        <div>{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      testList : [
        'Customers can earn corresponding rewards by completing loan tasks.',
        'Only loans completed within the campaign period will be counted.',
        'Customers can only withdraw through Coins account; withdrawals through other channels are not supported at this time.',
        'Customers can only withdraw during the specified withdrawal period; withdrawals are not supported beyond this period.',
        'After applying for a withdrawal, we will complete the payment within 10 working days.',
        'Each customer can apply for only one withdrawal per day, with a minimum withdrawal amount of 100 pesos.',
        'Campaign period: From 0:00 on December 24, 2023, to 24:00 on January 1, 2024.',
        'Withdrawal period: From 0:00 on December 24, 2023, to 24:00 on January 5, 2024.',
        'All interpretation rights of this campaign belong to THRIFT PLATINUM LENDING CORP.'
      ]
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang='scss'>
.double-dan-rule {
  height: 100vh;
  background-image: url(~@/assets/imgs/market/dan_rule_bg.png);
  background-size: 100% 100%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', 'Roboto';
  &-header {
    width: 100vw;
    height: 90px;
    padding: 0 32px;
    transition: all 0.8s;
    display: flex;
    align-items: center;
    color: #fff;
    & > img {
      width: 36px;
    }
    z-index: 9;
  }
  & > .cont {
    flex: 1;
    overflow-y: auto;
    padding: 106px 42px 0 48px;
    margin-bottom: 70px;
    color: #fff;
    & > .title {
      font-size: 48px;
      line-height: 32px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 48px;
    }
    & > .item {
      line-height: 48px;
      font-size: 28px;
      display: grid;
      grid-template-columns: 32px auto;
      div:first-child{
        display: inline-block;
      }
    }
  }
}
</style>